<ui:composition xmlns="http://www.w3.org/1999/xhtml"
					xmlns:f="http://java.sun.com/jsf/core"
					xmlns:h="http://java.sun.com/jsf/html"
					xmlns:ui="http://java.sun.com/jsf/facelets"
					xmlns:p="http://primefaces.org/ui"
					xmlns:pu="http://primefaces.org/ultima"
					xmlns:pt="http://xmlns.jcp.org/jsf/passthrough"
					xmlns:c="http://java.sun.com/jsp/jstl/core">
	<div class="layout-topbar shadow-4">
		<div class="layout-topbar-left">
			<a href="#{bean.baseHref}" class="layout-topbar-logo">
				<h:graphicImage name="images/skyve-logo-white.png" alt="logo" library="skyve" style="max-width: 90%;" />
			</a>
			<c:if test="#{showMenu}">
				<a class="layout-menu-button shadow-6" data-p-ripple="true">
					<i class="pi pi-chevron-right"></i>
				</a>
				<a class="layout-topbar-mobile-button"
						onclick="$('.layout-wrapper').toggleClass('layout-topbar-mobile-active')"
						data-p-ripple="true"
						data-p-styleclass="{ selector: '.layout-topbar-right', enterActiveClass: 'overlay-enter layout-topbar-mobile-active', enterToClass: 'layout-topbar-mobile-active', leaveActiveClass: 'overlay-leave layout-topbar-mobile-active' }">
					<i class="pi pi-ellipsis-v fs-large"></i>
				</a>
			</c:if>
		</div>
		<div class="layout-topbar-right">
			<div class="layout-topbar-actions-left">
				<p:outputPanel id="title" layout="inline" styleClass="topbar-title">
					#{title}
					<p:autoUpdate />
				</p:outputPanel>
			</div>
			<c:if test="#{showSwitchMode or showLogout}">
				<div class="layout-topbar-actions-right">
					<ul class="layout-topbar-items">
						<li class="layout-topbar-item">
							<c:if test="#{showSwitchMode or showLogout}">
								<div style="float:right;padding:30px 20px 20px 20px">
									<p:badge value="4" visible="false">
										<p:avatar id="avatar" shape="circle" label="#{bean.userContactInitials}" style="cursor:pointer">
											<p:graphicImage style="width:100%;height:100%" value="#{bean.userContactImageUrl}" rendered="#{not empty bean.userContactImageUrl}" />
										</p:avatar>
									</p:badge>
								</div>
							</c:if>
						</li>
					</ul>
				</div>
			</c:if>
		</div>
	</div>
	<c:if test="#{showSwitchMode or showLogout}">
		<p:overlayPanel for="avatar">
			<p:card style="text-align:center;background-color:rgb(248,249,250)" rendered="#{showLogout}">
				<f:facet name="header">
					<p:avatar size="xlarge" shape="circle" style="margin:5px" label="#{bean.userContactInitials}">
						<p:graphicImage value="#{bean.userContactImageUrl}" rendered="#{not empty bean.userContactImageUrl}" />
					</p:avatar>
				</f:facet>
				<f:facet name="title">
					<h:outputText value="#{bean.userContactName}" />
				</f:facet>
				<f:facet name="subtitle">
					<h:outputText value="#{bean.userName}" />
				</f:facet>
			</p:card>
			<h:form id="uxuiform" prependId="false"> 
				<h:inputHidden id="uxuicsrf" value="#{bean.csrfToken}">
					<p:autoUpdate />
				</h:inputHidden>
			   <p:menu style="width:100%;border:0">
		    	    <p:submenu label="User Management" rendered="#{showLogout}">
			            <p:menuitem value="Profile" url="?a=e&amp;m=admin&amp;d=UserDashboard" ajax="false" icon="fa-solid fa-user"/>
		    	        <p:menuitem value="Account" url="?a=e&amp;m=admin&amp;d=UserAccount" ajax="false" icon="fa-solid fa-user-shield"/>
		        	</p:submenu>
			        <p:separator rendered="#{showLogout}" />
					<p:menuitem value="Logout" url="loggedOut" ajax="false" icon="fa-solid fa-right-from-bracket" rendered="#{showLogout}" />
	    	    	<p:separator rendered="#{showSwitchMode and showLogout}" />
					<p:submenu label="Switch Mode" rendered="#{showSwitchMode}">
						<p:menuitem value="Switch mode" icon="fa-solid fa-retweet" action="#{bean.setUxUi('desktop')}" onsuccess="location.reload()" process="@form" update="@none" ignoreAutoUpdate="true" />
		    	    </p:submenu>
			    </p:menu>
			</h:form>
		</p:overlayPanel>
	</c:if>
</ui:composition>